<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-green sidebar-mini">
<!--修改密码-->
<div class="modal fade" id="modal-updatePassword">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改密码</h4>
            </div>
            <div class="modal-body">

                <form id="userForm" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label no-padding-right">新的密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="password" name="password" placeholder="请输入新密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="rePassword" class="col-sm-2 control-label no-padding-right">重复密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="rePassword" name="rePassword"
                                   placeholder="请再输入一次">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-updatePassword">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="wrapper">

    <header class="main-header">
        <a class="logo">
            <span class="logo-lg"><b style="float:left">数据看板系统</b></span>
        </a>
        <nav class="navbar navbar-static-top">
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" title="菜单缩放" role="button"></a>
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <li class="dropdown messages-menu">
                        <a href="#" title="项目下达任务消息提示" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-comment-o"></i>
                            <span class="label label-danger" id="count-send"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><ul class="menu" id="unread-send"></ul></li>
                            <li class="footer" id="total-read-send"><a href="javascript:void(0)">全部标记为已读</a></li>
                            <li class="footer" id="no-send"><a href="javascript:void(0)">没有未读消息</a></li>
                        </ul>
                    </li>
                    <li class="dropdown messages-menu">
                        <a href="#" title="项目变更消息提示" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-bell-o"></i>
                            <span class="label label-danger" id="count-change"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><ul class="menu" id="unread-change"></ul></li>
                            <li class="footer" id="total-read-change"><a href="javascript:void(0)">全部标记为已读</a></li>
                            <li class="footer" id="no-change"><a href="javascript:void(0)">没有未读消息</a></li>
                        </ul>
                    </li>
                    <li class="dropdown messages-menu">
                        <a href="#" title="互动专区消息提示" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="label label-danger" id="count-interactive"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><ul class="menu" id="unread-interactive"></ul></li>
                            <li class="footer" id="total-read-interactive"><a href="javascript:void(0)">全部标记为已读</a></li>
                            <li class="footer" id="no-interactive"><a href="javascript:void(0)">没有未读消息</a></li>
                        </ul>
                    </li>
                    <li shiro:authenticated="true"><a href="#" id="updatePassword" onclick="js.modal.open('modal-updatePassword')" ><i class="fa fa-edit">&nbsp;修改密码</i></a></li>
                    <!--<li> <a th:href="@{/help}" target="content" ><i class="fa fa-file-word-o">&nbsp;帮助</i></a> </li>-->
                    <li><a th:href="@{/logout}" ><i class="fa fa-sign-out">&nbsp;退出</i></a></li>
                </ul>
            </div>
        </nav>
    </header>

    <aside class="main-sidebar">
        <section class="sidebar">
            <ul class="sidebar-menu" data-widget="tree">

                <li shiro:hasPermission="overview:menu" class="treeview menu-open">
                    <a href="#">
                        <i class="fa fa-folder-open text-red"></i>
                        <span>项目总览</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
                    </a>
                    <ul class="treeview-menu" style="display: block;">
                        <li class="active"><a th:href="@{/overview/statistical}" shiro:hasPermission="overview:statistical" target="content"><i class="fa fa-circle-o text-red"></i> 项目统计</a></li>
                        <li><a th:href="@{/overview/program}" shiro:hasPermission="overview:program" target="content"><i class="fa fa-circle-o text-blue"></i> 公司战略纲领</a></li>
                        <li><a th:href="@{/overview/focus}" shiro:hasPermission="overview:focus" target="content"><i class="fa fa-circle-o text-orange"></i> 重点项目查询</a></li>
                    </ul>
                </li>

                <li shiro:hasPermission="project:menu" class="treeview">
                    <a href="#">
                        <i class="fa fa-folder-open text-yellow"></i>
                        <span>项目管理</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a th:href="@{/project/build}" shiro:hasPermission="project:build" target="content"><i class="fa fa-circle-o text-blue"></i> 创建项目</a></li>
                        <li><a th:href="@{/project/change}" shiro:hasPermission="project:change" target="content"><i class="fa fa-circle-o text-orange"></i> 项目变更</a></li>
                        <li><a th:href="@{/board/multi}" shiro:hasPermission="board:multi" target="content"><i class="fa fa-circle-o text-red"></i> 生产进度看板</a></li>
                        <li><a th:href="@{/board/daily}" shiro:hasPermission="board:daily" target="content"><i class="fa fa-circle-o text-warning"></i> 日报表维护</a></li>
                        <li><a th:href="@{/board/dailyTotal}" shiro:hasPermission="board:dailyTotal" target="content"><i class="fa fa-circle-o text-success"></i> 生产报表导入</a></li>
                    </ul>
                </li>

                <!--<li shiro:hasPermission="board:menu" class="treeview">
                    <a href="#">
                        <i class="fa fa-folder-open text-blue"></i>
                        <span>项目看板</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a th:href="@{/board/multi}" shiro:hasPermission="board:multi" target="content"><i class="fa fa-circle-o text-red"></i> 多项目看板</a></li>
                    </ul>
                </li>-->

                <li shiro:hasPermission="integrate:menu" class="treeview">
                    <a href="#">
                        <i class="fa fa-folder-open text-green"></i>
                        <span>综合查询</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a th:href="@{/integrate/progress}" shiro:hasPermission="integrate:progress" target="content"><i class="fa fa-circle-o text-yellow"></i> 项目进度表</a></li>
                        <li><a th:href="@{/integrate/daily}" shiro:hasPermission="integrate:daily" target="content"><i class="fa fa-circle-o text-yellow"></i> 生产日报查询</a></li>
                        <li><a th:href="@{/integrate/month}" shiro:hasPermission="integrate:month" target="content"><i class="fa fa-circle-o text-yellow"></i> 生产月报查询</a></li>
                        <li><a th:href="@{/integrate/interactive}" shiro:hasPermission="integrate:interactive" target="content"><i class="fa fa-circle-o text-yellow"></i> 互动专区</a></li>
                        <li><a th:href="@{/integrate/files}" shiro:hasPermission="integrate:files" target="content"><i class="fa fa-circle-o text-blue"></i> 项目文件查询</a></li>
                        <li><a th:href="@{/integrate/schedule}" shiro:hasPermission="integrate:schedule" target="content"><i class="fa fa-circle-o text-red"></i> 完成时间查询</a></li>
                        <!--<li><a th:href="@{/integrate/status}" shiro:hasPermission="integrate:status" target="content"><i class="fa fa-circle-o text-yellow"></i> 任务状态查询</a></li>-->
                    </ul>
                </li>

                <li shiro:hasPermission="config:menu" class="treeview">
                    <a href="#">
                        <i class="fa fa-folder-open text-aqua"></i>
                        <span>信息配置</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a th:href="@{/config/factory}" shiro:hasPermission="config:factory" target="content"><i class="fa fa-circle-o text-orange"></i> 分厂管理</a></li>
                        <li><a th:href="@{/config/taskTemp}" shiro:hasPermission="config:taskTemp" target="content"><i class="fa fa-circle-o text-purple"></i> 任务管理</a></li>
                        <li><a th:href="@{/config/client}" shiro:hasPermission="config:client" target="content"><i class="fa fa-circle-o text-orange"></i> 客户管理</a></li>
                        <li><a th:href="@{/config/category}" shiro:hasPermission="config:category" target="content"><i class="fa fa-circle-o text-success"></i> 类型管理</a></li>
                    </ul>
                </li>

                <li shiro:hasPermission="system:menu" class="treeview">
                    <a href="#">
                        <i class="fa fa-folder-open text-orange"></i>
                        <span>系统管理</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a th:href="@{/sys/user}" shiro:hasPermission="system:user" target="content"><i class="fa fa-circle-o text-red"></i> 帐号管理</a></li>
                        <li><a th:href="@{/sys/role}" shiro:hasPermission="system:role" target="content"><i class="fa fa-circle-o text-yellow"></i> 角色管理</a></li>
                        <li><a th:href="@{/sys/permission}" shiro:hasPermission="system:permissions" target="content"><i class="fa fa-circle-o text-blue"></i> 权限管理</a></li>
                        <li><a th:href="@{/sys/log}" shiro:hasPermission="system:log" target="content"><i class="fa fa-circle-o text-green"></i> 操作日志</a></li>
                    </ul>
                </li>

            </ul>
        </section>
    </aside>

    <div class="content-wrapper">
        <iframe id="content" th:src="@{/overview/statistical}" scrolling="auto" frameborder="0" name="content" width="100%" height="100%"></iframe>
    </div>
</div>

<div th:include="include :: footer"></div>
<script>
    /** 如果首页不在最顶层， 将最顶层改为首页 */
    if (window.parent.window !== window) {
        window.top.location = ctx;
    }

    /** 修改iframe框架高度 */
    function changeFrameHeight() {
        var ifm = document.getElementById("content");
        ifm.height = document.documentElement.clientHeight - 56;
    }

    /** 窗口大小改变事件 */
    window.onresize = function () {
        changeFrameHeight();
    };

    /** 获取下任务消息 */
    function getSend() {
        $("#unread-send").html('');
        $("#count-send").html('');
        $("#total-read-send").hide();
        $("#no-send").show();
        js.get({
            url: ctx + "send",
            success: function (result) {
                if (result.length > 0) {
                    $("#total-read-send").show();
                    $("#no-send").hide();
                    $("#count-send").html(result.length);
                    result.forEach(function (v, i, array){
                        let img = ctx + "img/avatar.png";
                        $("#unread-send").append(`
                            <li><a class="message-send" target="_blank" href="${ctx + 'board/single/' + v.projectId + '/' + v.id}">
                            <div class="pull-left"> <img class="img-circle" alt="Image" src="${img}"></div>
                            <h4>系统通知<small><i class="fa fa-clock-o"></i>${v.createTime}</small></h4>
                            <p>${v.content}</p></a></li>
                        `);
                    })
                }
                js.modal.closeLoading();

            }
        });
    }

    /** 获取下任务消息 */
    function getChange() {
        $("#unread-change").html('');
        $("#count-change").html('');
        $("#total-read-change").hide();
        $("#no-change").show();
        js.get({
            url: ctx + "change",
            success: function (result) {
                if (result.length > 0) {
                    $("#total-read-change").show();
                    $("#no-change").hide();
                    $("#count-change").html(result.length);
                    result.forEach(function (v, i, array){
                        let img = ctx + "img/avatar.png";
                        $("#unread-change").append(`
                            <li><a class="message-change" target="_blank" href="${ctx + 'board/single/' + v.projectId + '/' + v.id}">
                            <div class="pull-left"> <img class="img-circle" alt="Image" src="${img}"></div>
                            <h4>系统通知<small><i class="fa fa-clock-o"></i>${v.createTime}</small></h4>
                            <p>${v.content}</p></a></li>
                        `);
                    })
                }
                js.modal.closeLoading();

            }
        });
    }

    /**
     * 获取互动消息
     */
    function getInteractive() {
        $("#unread-interactive").html('');
        $("#count-interactive").html('');
        $("#total-read-interactive").hide();
        $("#no-interactive").show();
        js.get({
            url: ctx + "receiver",
            success: function (result) {
                if (result.length > 0) {
                    $("#total-read-interactive").show();
                    $("#no-interactive").hide();
                    $("#count-interactive").html(result.length);
                    result.forEach(function (v, i, array){
                        let img = v.sendUserImage == null ? (ctx + "img/avatar.png") : v.sendUserImage;
                        $("#unread-interactive").append(`
                            <li><a class="message-interactive" target="_blank" href="${ctx + 'board/single/' + v.projectId + '/' + v.id}">
                            <div class="pull-left"> <img class="img-circle" alt="Image" src="${img}"></div>
                            <h4>${v.sendUserName}<small><i class="fa fa-clock-o"></i>${v.createTime}</small></h4>
                            <p>${v.content}</p></a></li>
                        `);
                    })
                }
                js.modal.closeLoading();

            }
        });
    }


    $(function () {

        /** iframe 自动高度 */
        changeFrameHeight();

        /** 验证初始化 */
        js.validate.init("userForm",{
            fields: {
                password: {validators: {notEmpty: {message: '请输入密码'}}},
                rePassword: {validators: {notEmpty: {message: '请确认密码'},identical: { field: 'password', message: '两次密码不一致'}}}
            }
        });

        /** 修改密码 */
        $("#btn-updatePassword").click(function () {
            if (js.validate.isValid("userForm")) {
                js.post({
                    url: ctx + "update/user/pwd",
                    data: $("#userForm").serialize(),
                    success: function (result) {
                        if (result.type === web_status.SUCCESS) {
                            js.modal.success(result.msg);
                            js.modal.hide("modal-updatePassword");
                        } else {
                            js.modal.warning(result.msg);
                        }
                        js.modal.closeLoading();
                    }
                });
            }
        });

        /** 菜单栏点击事件 */
        $(".treeview-menu>li").click(function () {
            $(".treeview-menu>li").removeClass("active");
            $(this).addClass("active");
        });

        /** 初始化WebSocket */
        js.ws.init({
            // url: "ws://192.168.72.158:8080/websocket",
            url: "ws://192.168.50.3:8081/websocket",
            handler: function (msg) {
                if (msg.data === "INTERACTIVE") {
                    getInteractive();
                } else if (msg.data === "SEND") {
                    getSend();
                } else if (msg.data === "CHANGE") {
                    getChange();
                }
            }
        });

        /** 获取互动消息 */
        getInteractive();

        /** 获取下任务消息 */
        getSend();

        /** 获取项目变更消息 */
        getChange();

        /** 互动消息点击 */
        $(document).on('click',".message-interactive",function () {
            var count = parseInt($("#count-interactive").text());
            if (count > 1) {
                $("#count-interactive").text(count - 1);
            } else {
                $("#count-interactive").text('');
            }
            $(this).parent().remove();
        });

        /** 下任务点击 */
        $(document).on('click',".message-send",function () {
            var count = parseInt($("#count-send").text());
            if (count > 1) {
                $("#count-send").text(count - 1);
            } else {
                $("#count-send").text('');
            }
            $(this).parent().remove();
        });

        /** 下任务点击 */
        $(document).on('click',".message-change",function () {
            var count = parseInt($("#count-change").text());
            if (count > 1) {
                $("#count-change").text(count - 1);
            } else {
                $("#count-change").text('');
            }
            $(this).parent().remove();
        });

        // 标记全部为已读
        $(document).on('click', "#total-read-send", function () {
            js.modal.confirm("确认标记全部消息为已读吗？此操作不可恢复！", function () {
                js.get({
                    url: ctx + "mark/send",
                    success(){
                        getSend();
                    }
                });
            });
        });

// 标记全部为已读
        $(document).on('click',"#total-read-change",function () {
            js.modal.confirm("确认标记全部消息为已读吗？此操作不可恢复！",function () {
                js.get({
                    url: ctx + "mark/change",
                    success() {
                        getChange();
                    }
                });
            });
        });

// 标记全部为已读
        $(document).on('click', "#total-read-interactive", function () {
            js.modal.confirm("确认标记全部消息为已读吗？此操作不可恢复！", function () {
                js.get({
                    url: ctx + "mark/interactive",
                    success() {
                        getInteractive();
                    }
                });
            });
        });

    });
</script>
</body>
</html>
